<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title>DueDates: Login</title>
  <link rel="stylesheet" type="text/css" href="./GlobalStyle.css" />
  <link rel="stylesheet" type="text/css" href="./LoginPage.css" />
</head>

<body id="bodycontainer" onload="document.loginform.email.focus();">

<div id="headercontainer">

  <!-- need a separate div because the contents have a different width than the headerstyle div -->
  <div id="headercontent">
    <span id="headermaintext">DueDates-Akala</span><br />
    <span id="headersubtext">A personal library management tool</span>
  </div>
  
</div>

<div id="maincontentcontainer">
  <!-- login form container -->
  <div id="formcontainer">
    <span id="loginheader">Login</span>
  
    <form wicket:id="form" name="loginform">
    
      <div id="loginfields">
        <ul>
          <li><span>Email:</span> <input wicket:id="email" name="email" type="text" /></li>
          <li><span>Password:</span> <input wicket:id="password" type="password" /></li>
        </ul>
      </div>
      
      <div id="loginerrormessage">
        <span wicket:id="feedback">[error message]</span>
      </div>
      
      <div id="loginbuttons">
        <input type="submit" value="Login" />
        <input type="reset" value="Clear" />
      </div>
    
    </form>
  </div>

  <div id="maintextcontainer">
    <div id="maintext">
      <span class="header">Welcome to DueDates</span>
      <br />
      <span>
      DueDates is an easy-to-use tool for keeping track of items that you have checked out from
      libraries. It accesses your library accounts online, checks what items you have borrowed
      and when they are due, and displays this information in a convenient format. If you've ever
      forgotten about a due date or had an overdue fine, then DueDates is the tool for you!
      </span>
    </div>
    
    <div id="featurestext">
      <span class="header">Features</span>
      <span>
      <ul>
        <li>Supports the University of Hawaii Library System and the Hawaii State Public Library
          System</li>
        <li>Open source! Add your own libraries!</li>
        <li>Check multiple libraries with a single click</li>
        <li>Sort results by library, title or due date</li>
        <li>Custom-filter results to display only items that are due soon</li>
        <li>Customizable email alerts to notify you when items are due</li>
      </ul> 
      </span>
    </div>
    
  </div><!--maintextcontainer-->
</div><!--maincontentcontainer-->
</body>
</html>